<template>
    <div>
        <SpuListDetail v-show="!editData.visible" :params="editData.data" @jump="showSkuListDialog"></SpuListDetail>
        <SuggestList v-show="editData.visible" :params="editData.data" @cancel="editData.visible=false"></SuggestList>
    </div>
</template>
<script>
import SpuListDetail from './components/spuListDetail.vue'
import SuggestList from './detail.vue'
export default {
    name: 'PurchaseSuggest',
    components: { SpuListDetail, SuggestList },
    data() {
        return {
            cartVisible: false,
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            total_normal: 0,
            total_not: 0,

            // 状态数据字典
            dict: {
                salesmanList: [],
                productType: [
                    { label: 'bar类型', value: 1 },
                    { label: 'shapewear类型', value: 2 },
                    { label: 'swim类型', value: 3 },
                    { label: 'panties类型', value: 4 },
                    { label: '其他', value: 5 },
                ],
                hotType: [
                    { label: '热销', value: 1 },
                    { label: '潜力款', value: 2 },
                    { label: '新品', value: 3 },
                    { label: '中长尾款', value: 4 },
                ],
            },
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                product_type: undefined,
                seller_sku: undefined,
                hot_type: undefined,
                spu: undefined,
                operate_id: undefined,
                supply_id: undefined,
                create_time: [],
                inventory_quantity :undefined,
                on_way_quantity :undefined,
                not_send_quantity :undefined,
                sku_1days :undefined,
                suggest_sku_nums :undefined,
            },
            syncDialog: {
                visible: false,
                data: {},
            },
            remarkDialog: {
                visible: false,
                data: {},
            },
            changeSupplyDialog: {
                visible: false,
                data: {},
            },
            editModal: {
                id: '',
                suggest_sku_nums: '',
                produce_days: ''
            },
            editData: {
                visible: false,
                data: {},
            },
            cartPosition: { x: 0, y: 0 },
            cartCount: 0,
        }
    },

    methods: {
        showSkuListDialog(row) {
            this.editData.visible = true
            this.editData.data = row
        },
    },
}
</script>
<style scoped>
.ball {
    display: block;
    position: fixed;
    width: 20px; /* 小球的宽度 */
    height: 20px; /* 小球的高度 */
    background-color: #f40; /* 小球的颜色 */
    border-radius: 50%; /* 圆形 */
    z-index: 9999; /* 确保在最上层 */
    pointer-events: none; /* 防止干扰点击事件 */
    opacity: 1; /* 确保初始可见 */
    transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41); /* 动画效果 */
}
::v-deep .expend-table .el-table__expanded-cell[class*='cell'] {
    padding: 0 !important;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.border-cell {
    padding: 0 !important;
}
.border-cell .cell {
    padding: 0 !important;
}
.border-cell-item {
    padding: 10px;
    border-bottom: 1px solid #dfe6ec;
}
.border-cell-item:last-child {
    border-bottom: 0;
}
.el-tabs--border-card {
    box-shadow: none;
    border-bottom: 0;
}

::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.table-wrap {
    padding: 4px 0 0 0;
    border-bottom: 1px solid #dfe4ed;
    border-left: 1px solid #dfe4ed;
    border-right: 1px solid #dfe4ed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
<style lang="scss" scoped>
.cart-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
::v-deep .cart-body {
    flex: 1;
    .el-checkbox__label {
        width: 0;
        padding: 0;
        color: transparent;
    }
}
.cart-header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.cart-title {
    font-size: 14px;
    padding: 8px 12px;
    background-color: #ddd;
}
.cart-row {
    font-size: 14px;
    padding: 8px 12px;
    border-bottom: 1px solid #f5f5f5;
}
.cart-footer {
    padding: 8px 12px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep .sub-table {
    border: 0;
    &::after {
        background: transparent;
    }
    /* 隐藏子表格的滚动条 */
    .el-table__body-wrapper {
        overflow-x: hidden !important;
    }
}

::v-deep .small-img {
    .upload-img-wrap {
        width: 54px;
    }
    .upload-img-box {
        width: 50px;
        height: 50px;
    }
    .upload-img {
        width: 48px;
        height: 48px;
    }
}
</style>
